import QtQuick 1.1
import com.nokia.meego 1.0


Rectangle {
    id: button

    property string image: ""
    property string textButton: ""
    property int textButtonSize: 16

    property int dd: screen.orientationString == "Landscape" || screen.orientationString == "LandscapeInverted" ? 10 : 80

    radius: 18
    smooth: true
    color: "transparent"

    Item {
        anchors.centerIn: parent
        anchors.fill: parent
        Rectangle {
            id: rectButtonBorder
            anchors.top: parent.top
            anchors.topMargin: 5
            anchors.horizontalCenter: parent.horizontalCenter
            height: parent.height - lblButton.height - dd -10
            width: parent.width
            radius: 45
            smooth: true
            color: "transparent"
            Image {
                id: imgButton1
                height: parent.height > parent.width ?  parent.width - dd : parent.height - dd
                width: parent.height > parent.width ?  parent.width - dd : parent.height - dd
                anchors.centerIn: parent
                smooth: true
                source: image
                opacity: 1
                z: 1
            }
            Image {
                id: imgButton2
                height: parent.height > parent.width ?  parent.width - dd : parent.height - dd
                width: parent.height > parent.width ?  parent.width - dd : parent.height - dd
                anchors.centerIn: parent
                smooth: true
                opacity: 0
                z: 0
                source: "images/glow.png"
            }
        }
        Label {
            id: lblButton
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: rectButtonBorder.bottom
            anchors.topMargin: 10
            font.pointSize: textButtonSize
            //font.bold: true
            text: textButton
            font.family: "Nokia Pure Text"
        }
    }



    states: [
        State {
                name: "normal"
                when: buttonMouseArea.pressed === false
                PropertyChanges { target: imgButton1; scale: 1.10; }
                PropertyChanges { target: imgButton2; scale: 1.10; }
                PropertyChanges { target: imgButton2; opacity: 0; }
        } ,
        State {
                name: "pressed"
                when: buttonMouseArea.pressed === true
                PropertyChanges { target: imgButton1; scale: 1.05; }
                PropertyChanges { target: imgButton2; scale: 1.05; }
                PropertyChanges { target: imgButton2; opacity: 1; }
        }
    ]
    transitions: Transition {  NumberAnimation{ properties: "scale,opacity"; duration: 100 } }


    signal buttonClick()

    MouseArea {
        id: buttonMouseArea
        anchors.fill: parent
        onClicked: {
            buttonClick()
        }
    }
}
